<template>
  <drag-div
    ><div slot="left" class="m">
      <cm-scroll>
        <el-input
          placeholder="请输入关键词进行过滤"
          v-model="filterText"
        ></el-input>
        <el-tree
          class="filter-tree"
          :data="categoryList"
          :props="categoryProps"
          :filter-node-method="filterNode"
          ref="tree"
          node-key="id"
          :default-expanded-keys="[defaultExpandKeys]"
          :highlight-current="showTree"
          :style="maxHeight"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          default-expand-all
        >
        </el-tree>
      </cm-scroll>
    </div>
    <div slot="right" style="padding:10px">
      <el-row>
        <box-border class="p10">
          <el-col :span="24">
            <div>
              <el-row :gutter="4">
                <el-form :inline="true" label-width="100px">
                  <el-form-item>
                    <el-input
                      placeholder="请输入关键字进行查询"
                      v-model="searchDto.keywords"
                    ></el-input>
                  </el-form-item>
                  <el-form-item class="clear_item-margin-bottom">
                    <el-button
                      type="primary"
                      icon="el-icon-search"
                      @click="getPageData()"
                      >查询
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-s-open"
                      @click="clear"
                      >重置
                    </el-button>
                    <el-button
                      type="primary"
                      icon="el-icon-circle-plus"
                      @click="newWorkFlow()"
                      >新建流程
                    </el-button>
                  </el-form-item>
                </el-form>
              </el-row>
            </div>
            <div class="table_content">
              <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="全部" name="all"></el-tab-pane>
              </el-tabs>
              <page-table
                ref="multipleSelection"
                :page-data="pageData"
                :loading="loading"
                :do-get-page-data="getPageData"
              >
                <el-table-column prop="name" label="流程名称" align="left">
                </el-table-column>
                <!--            <el-table-column prop="type" label="类型" align="center">-->
                <!--            </el-table-column>-->
                <!--            <el-table-column-->
                <!--              prop="createTime"-->
                <!--              label="创建日期"-->
                <!--              align="center"-->
                <!--              show-overflow-tooltip-->
                <!--            >-->
                <!--              <template slot-scope="scope">-->
                <!--                <span>{{ scope.row.createTime | dataTime }}</span>-->
                <!--              </template>-->
                <!--            </el-table-column>-->
                <el-table-column
                  label="管理"
                  width="220"
                  align="center"
                  fixed="right"
                >
                  <template slot-scope="scope">
                    <el-tooltip content="编辑" placement="top"
                      ><el-button
                        type="button"
                        size="mini"
                        icon="el-icon-edit"
                        @click="editWorkFlow(scope.row)"
                      >
                      </el-button
                    ></el-tooltip>
                    <el-tooltip content="发布" placement="top"
                      ><el-button
                        type="button"
                        size="mini"
                        icon="el-icon-s-promotion"
                        @click="publishWorkFlow(scope.row)"
                      >
                      </el-button
                    ></el-tooltip>
                    <el-tooltip content="删除" placement="top"
                      ><el-button
                        size="mini"
                        icon="el-icon-delete"
                        @click="delWorkFlow(scope.row)"
                      >
                      </el-button
                    ></el-tooltip>
                  </template>
                </el-table-column>
              </page-table>
            </div>
          </el-col>
        </box-border>
      </el-row></div
  ></drag-div>
</template>
<script>
import { mapGetters } from "vuex";
import _ from "lodash";
export default {
  name: "flowManger",
  created() {
    this.getCategoryTree();
    this.getPageData();
  },
  data() {
    return {
      activeName: "all",
      searchDto: {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        keywords: ""
      },
      filterText: "",
      categoryList: [],
      categoryProps: {
        label: "name",
        value: "id",
        children: "children"
      },
      loading: false,
      defaultExpandKeys: "",
      showTree: false,
      pageData: {}
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  computed: {
    ...mapGetters({}),
    maxHeight() {
      return { height: this.clientHeight - 220 + "px" };
    }
  },
  methods: {
    handleClick(tab, event) {
      let status = "all";
      switch (tab.paneName) {
        case "all":
          status = "all";
          break;
      }
    },
    // 工作流程分页列表
    getPageData(val) {
      if (this.searchDto.categoryId && this.searchDto.categoryId.length > 0) {
        this.searchDto.categoryId = this.searchDto.categoryId[0];
      }
      let tem = Object.assign(this.searchDto, val);
      console.log(tem, "search");
      this.API.getWorkflowPageList(tem).then(res => {
        this.pageData = res.data;
        console.log("res", res.data);
      });
    },
    // 获取流程类型
    getCategoryTree() {
      this.API.getCategoryTree({ type: "WORKFLOW", parentId: 0 }).then(res => {
        this.categoryList = [];
        if (res.data) {
          this.categoryList.push({ name: "全部", id: "", children: res.data });
        }
        console.log("this.categoryList", this.categoryList);
      });
    },
    // 过滤分类
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    // 左侧分类树的单击事件
    handleNodeClick(val) {
      console.log(val);
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        pageIndex: "",
        keywords: ""
      };
      this.searchDto.categoryId = val.id;
      this.getPageData();
    },
    //   //数据流程删除
    delWorkFlow(row) {
      this.$confirm("确认删除当前流程?", "提示", {})
        .then(() => {
          let tem = {
            id: row.id
          };
          this.API.deleteWorkflowById(tem).then(res => {
            this.$message({
              message: "删除成功",
              type: "success"
            });
            this.getPageData();
          });
        })
        .catch(() => {});
    },
    // 编辑流程
    editWorkFlow(row) {
      let data = "/design.html#/?operate=update&flowId=" + row.id;
      window.open(data, "_blank");
    },
    // 发布流程
    publishWorkFlow(row) {
      this.$confirm("确认发布当前流程?", "提示", {})
        .then(() => {
          if (row.id) {
            this.API.publishWorkflowById({ id: row.id }).then(res => {
              this.success("发布流程成功");
            });
          }
        })
        .catch(() => {});
    },
    // 新建流程
    newWorkFlow() {
      let data = "/design.html#/?operate=create";
      window.open(data, "_blank");
    },
    clear() {
      this.searchDto = {
        categoryId: "",
        pageSize: 10,
        keywords: ""
      };
      this.getPageData();
    }
  }
};
</script>
<style scoped lang="less"></style>
